<template>
  <div style="display: flex;line-height: 60px">

          <div style="margin-top: 8px">
            <i :class="icon" style="font-size: 20px;cursor: pointer;" @click="collapse"></i>
          </div>

            <div style="flex: 1;text-align: center;font-size: 34px">
              <span>欢迎来到仓库管理系统</span>
            </div>
      <el-dropdown>
          <i class="el-icon-arrow-down" style="margin-right: 15px;"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        <span>{{user.name}}</span>
        </el-dropdown>



  </div>
</template>

<script>
export default {
  name: "HeaderView",
  data(){
    let userStr = sessionStorage.getItem("CurUser") || "{}"; // 兜底空对象字符串
    let user = {};
    try {
      user = JSON.parse(userStr); // 尝试解析，失败则置空
    } catch (err) {
      user = {};
    }
    return {
      user: user // 显式声明响应式属性
    };

  },
  props:{
    icon:String
  },
  methods:{
    toUser(){
      console.log('to_user')
      this.$router.push('/HomeView')
    },
    logout(){
      console.log('logout')
      this.$confirm('您确定要退出登录吗？','提示',{
        confirmButtonText:'确定',
        type:'warning',
        center:true,
      })
      .then(()=>{
        this.$message({
          type:'success',
          message:'退出登录成功'
        })
        this.$router.push("/")
        sessionStorage.clear()
      })
      .catch(() => {
        this.$message({
          type:'info',
          message:'已取消退出登录'
        })
      })

    },
    collapse(){
      this.$emit('doCollapse')
    }
  },
  created() {
    this.$router.push('/HomeView')
  }
}
</script>



<style scoped>

</style>